<template>
    <div class="preferential-container-wrap yhq-container-wrap">
        <mt-navbar v-model="selected">
            <mt-tab-item id="2">可使用({{yhqcount.availableAmount}})<i></i></mt-tab-item>
            <mt-tab-item id="4">已过期({{yhqcount.expiredAmount}})<i></i></mt-tab-item>
            <mt-tab-item id="3">已使用({{yhqcount.usedAmount}})<i></i></mt-tab-item>
        </mt-navbar>
        <mt-tab-container v-model="selected" swipeable="swipeable">
            <mt-tab-container-item id="2">
                <div>
                    <mt-loadmore :bottom-method="ksyLoadBottom" :bottom-all-loaded="ksyAllLoaded" ref="ksyloadmore">
                        <div class="couponlist-cont">
                            <YhqList :list="ksyList" :isLoading="isLoading" :couponstate="selected" :productTypeDtos="productTypeDtos" key="ksyofcoupon" />
                        </div>
                    </mt-loadmore>
                </div>
            </mt-tab-container-item>
            <mt-tab-container-item id="4">
                <div>
                    <mt-loadmore :bottom-method="ygqLoadBottom" :bottom-all-loaded="ygqAllLoaded" ref="ygqloadmore">
                        <div class="couponlist-cont">
                            <YhqList :list="ygqList" :isLoading="isLoading" :couponstate="selected" :productTypeDtos="productTypeDtos" key="ygqofcoupon" />
                        </div>
                    </mt-loadmore>
                </div>
            </mt-tab-container-item>
            <mt-tab-container-item id="3">
                <div>
                    <mt-loadmore :bottom-method="ysyLoadBottom" :bottom-all-loaded="ysyAllLoaded" ref="ysyloadmore">
                        <div class="couponlist-cont">
                            <YhqList :list="ysyList" :isLoading="isLoading" :couponstate="selected" :productTypeDtos="productTypeDtos" key="ysyofcoupon" />
                        </div>
                    </mt-loadmore>
                </div>
            </mt-tab-container-item>
        </mt-tab-container>
    </div>
</template>
<script>
  import axios from '~/plugins/axios'
  import { Toast } from 'mint-ui'
  import YhqList from './yhq-coupon-list'
  export default {
    name: 'yhq',
    props: {
      yhqcount: {
        type: Object
      },
      productTypeDtos: {
        type: Array,
        default: () => []
      }
    },
    components: {
      YhqList
    },
    data () {
      return {
        selected: '2',
        swipeable: false,
        ksyAllLoaded: true,
        ygqAllLoaded: true,
        ysyAllLoaded: true,
        isLoading: false,
        ksyHasQuery: false,
        ygqHasQuery: false,
        ysyHasQuery: false,
        ksyList: [],
        ygqList: [],
        ysyList: [],
        ksy: {
          pageIndex: 1,
          pageSize: 20,
          state: 2
        },
        ygq: {
          pageIndex: 1,
          pageSize: 20,
          state: 4
        },
        ysy: {
          pageIndex: 1,
          pageSize: 20,
          state: 3
        }
      }
    },
    mounted () {
      // console.log('mounted')
      // if (!this.ksyHasQuery) {
      //   this.getCouponList(this.ksy, 'ksyList', 'ksyHasQuery', 'ksyAllLoaded')
      // }
      // axios.post('/api/queryAllProductType', {}).then((resp) => {
      //   if (resp && resp.data && resp.data.responseCode === 0) {
      //     this.productTypeDtos = resp.data.productTypeDtos
      //   }
      // })
    },
    watch: {
      // 如果 `active` 发生改变，这个函数就会运行
      selected (newActive, oldActive) {
        if (this.isLoading) {
          this.selected = oldActive
        }
        // else if (newActive === '2' && !this.ksyHasQuery) {
        //   this.getCouponList(this.ksy, 'ksyList', 'ksyHasQuery')
        // } else if (newActive === '4' && !this.ygqHasQuery) {
        //   this.getCouponList(this.ygq, 'ygqList', 'ygqHasQuery')
        // } else if (newActive === '3' && !this.ysyHasQuery) {
        //   this.getCouponList(this.ysy, 'ysyList', 'ysyHasQuery')
        // }
      }
    },
    methods: {
      ksyLoadBottom () {
        console.log('ksyloadmore')
        this.getCouponList(this.ksy, 'ksyList', 'ksyHasQuery', 'ksyAllLoaded', 'ksyloadmore')
      },
      ygqLoadBottom () {
        console.log('ygqloadmore')
        this.getCouponList(this.ygq, 'ygqList', 'ygqHasQuery', 'ygqAllLoaded', 'ygqloadmore')
      },
      ysyLoadBottom () {
        console.log('ysyloadmore')
        this.getCouponList(this.ysy, 'ysyList', 'ysyHasQuery', 'ysyAllLoaded', 'ysyloadmore')
      },
      getCouponList (datas, list, hasQuery, allLoaded, refsName) {
        this.isLoading = true
        var datas = datas
        axios.post('/api/queryCouponList', datas).then((resp) => {
          this.isLoading = false
          console.log('1111')
          console.log(resp.data)
          if (resp && resp.data && resp.data.responseCode === 0) {
            this[list] = resp.data.pagination.resultList
            this[hasQuery] = true
            if (resp.data.pagination.totalCount > resp.data.pagination.resultList.length) {
              this[allLoaded] = false
              datas.pageSize = datas.pageSize + 20
              this[datas] = datas
              this.$refs[refsName].onBottomLoaded()
            } else {
              this[allLoaded] = true
            }
          } else {
            Toast(resp.data.responseMessage)
          }
        }).catch(errors => {
          this.isLoading = false
          Toast('接口异常')
        })
      }
    }
  }
</script>
<style lang="sass" src="~/assets/sass/coupon-cont.sass"></style>